<template>
    <div v-if="userInfo.userInfo.Id">
        
        显示用户信息:{{userInfo.userInfo.UserName }}
       
        <input type="button" value="添加" class="btn btn-primary" @click="addmemberlevel">
        <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td>Id</td>
                        <td>等级名称</td>
                        <td>等级权益</td>
                        <td>等级名称</td>
                    </tr>
                    <tr v-for="item in data.list" >
                        <td>{{item.Id}}</td>
                        <td>{{item.LevelName}}</td>
                        <td>{{item.levelRights}}</td>
                        
                        <td>
                            <input type="button" value="修改" class="btn btn-primary" @click="upd(item.Id)">
                            <input type="button" value="删除" class="btn btn-error">
                        </td>
                    </tr>
                </tbody>
        </table>
    </div>

</template>

<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import{useRouter,useRoute } from 'vue-router'
import axios from 'axios';
import {useUserStore} from '../../stores/user'

const Route=useRoute();
const Router=useRouter();
const userInfo=useUserStore();

const router=useRouter();
console.log(userInfo)
const addmemberlevel=()=>{
    router.push('/memberadd');
}

const upd=(id:any)=>{
    router.push({
        path:'/memberlevleupd',
        query:{id:id},
    })
}

//声明一个变量存储后端返回的数据]
// let list=ref([]);

let data :any=reactive({
    list:[],
})



//onMounted 相当于文档就绪函数 但是生命周期函数onMounted 挂载
onMounted(()=>{
    getlist()
});

const getlist=()=>{
    axios({
        method:'get',
        url:'/api/Member/GetMemberLevels',
    

    })
    .then(res=>{
        console.log(res);
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>